<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js自定义指令</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>

<!--全局自定义指令-->
    <div id="app">
        <p>页面载入时，input元素自动获取焦点：</p>
        <input v-focus>
    </div>
    <script>
        // 注册全局自定义指令 v-focus
        Vue.directives('focus',{
        inserted:function(el){
            //聚焦元素
            el.focus()
        }
        })
        new Vue({
            el:'#app'
        })
    </script>


<!--局部自定义指令-->
    <div id="app2">
        <p>页面载入时，元素自动获取焦点：</p>
        <input v-focus>
    </div>
    <script>
        new Vue({
            el:'#app2',
            directives:{
                //注册局部自定义指令 v-focus
                focus:{
                    //指令的定义
                    inserted:function(el){
                        //聚焦元素
                        el.focus()
                    }
                }
            }
        })
    </script>



<!--    钩子函数请前往www.runoob.com学习-->
</body>
</html>